<template>
    <div class="user-count">
      <div class="icon">
        <i class="el-icon-truck"></i>
      </div>
      <div class="text">
        <span>{{ ParkOrdertotal }}</span>
        <p class="title">车位总量</p>
      </div>
    </div>
  </template>
    
    <script>
  export default {
      data(){
          return{
            ParkOrdertotal:""
          }
  
      },
    methods: {
      async getParkOrder() {
        try {
          const { data: res } = await this.axios.get(
            "parking/getParkOrder?currPage=0&pageNum=4"
          );
          // console.log(res);
          this.ParkOrdertotal = res.total;
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
    },
    mounted() {
      this.getParkOrder();
    },
  };
  </script>
    
    <style lang="scss" scoped>
  .user-count {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 图标和文本分别位于两侧 */
    font-family: "Noto Sans SC";
    padding: 0 60px 0 30px; /* 左右各留 20px 空白 */
    width: 100%; /* 确保容器占满父容器的宽度 */
    box-sizing: border-box;
  
    .icon {
      .el-icon-truck {
        font-size: 66px;
        color: rgb(242, 185, 14);
      }
    }
  
    .text {
      display: flex;
      flex-direction: column; /* 文本部分垂直排列 */
      justify-content: center; /* 垂直居中对齐 */
  
      span {
        font-size: 32px;
        font-weight: bold;
      }
  
      .title {
        font-size: 14px;
        color: #666; /* 标题颜色可以根据需要调整 */
      }
    }
  }
  </style>